<template>
<div>
  <div class="topTitle">
      <i class="iconfont location">&#xe64b;</i>
      <span>当前位置：课程列表 - {{type}}</span>
  </div>
  <div class="courseTable">
        <el-table
            :data="tableData"
            height="535"
            border
            style="width: 100%;"
        >
            <el-table-column
            prop="rownum"
            label="序号"
            width="50"
            align="center">
            </el-table-column>
            <el-table-column
            prop="couname"
            label="课程名称"
            align="center">
            </el-table-column>
            <el-table-column label="操作"
             width="120"
            align="center">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary" round
                @click="handleJump(scope.$index, scope.row)">开始授课</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: this.$store.state.isaz == "0" ? "AZ" : "非AZ",
      tableData: [
        {
          rownum: "",
          couid: "",
          couname: ""
        }
      ]
    };
  },
  mounted: function() {
    var url = "/Course/" + this.$store.state.isaz + "/V2";
    // console.log(url);
    this.$axios.get(url, {}).then(json => {
      // console.log(json.data);
      if (json.data == "loginout") {
        this.$message({
          type: "info",
          message: "登录信息失效，请重新登录！"
        });
        this.$router.push("/login");
      } else {
        var courseList = json.data;
        var coulistdata = [];
        for (let i = 0; i < courseList.length; i++) {
          var item = {
            couid: courseList[i].Cos_ID,
            rownum: i + 1,
            couname: courseList[i].Cos_Name
          };
          coulistdata[i] = item;
        }
        this.tableData = coulistdata;
      }
    });
  },
  methods: {
    handleJump(index, row) {
      // console.log(row.couid);
      var classroom = {
        Cos_ID: row.couid,
        Cos_Name: row.couname
      };
      this.$axios
        .put("/Classroom/" + this.$store.state.dtid + "/V1", classroom)
        .then(json => {})
        .catch(error => {});
      this.$router.push({
        path: "/coursedetail",
        query: { couid: row.couid, couname: row.couname }
      });
    }
  }
};
</script>
<style scoped>
@font-face {
  font-family: "iconfont"; /* project id 1492498 */
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot");
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff") format("woff"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.topTitle {
  border-bottom: 1px solid #e5e5e5;
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  color: #64a4f6;
}
.location {
  color: #64a4f6;
  font-size: 30px;
  vertical-align: bottom;
}
.courseTable {
  margin: 0 20px;
}
@media screen and (min-width: 1441px) and (max-width: 1960px) {
  .el-table {
    height: 650px !important;
  }
}
</style>
